<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.9">
    <title>课程列表</title>
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .my-container {
            height: 100%;
        }

        .table .text {
            /* padding-top: 10px !important; */
        }

        .table th, .table td {
            text-align: center;
        }

        .table td {
            display: table-cell !important;
            vertical-align: middle !important;
        }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            color: #666;
            text-align: center;
        }
    </style>
    <!-- 引入jquery.js-->
    <script src="./static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 引入bootstrap.js-->
    <script src="./static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
    <script>
        $(function(){
            loadTypes();
        })
        function loadTypes(condition){

            $.getJSON("/type/selectAll",{"condition":condition},function(data){
                $("tbody").empty();
                let i = 1;
                for (let type of data){
                    let rowItem = `<tr>
                    <td>${i}</td>
                    <td>${type.tName}</td>
                    <td>${type.rCount}</td>
                    <td>
                        <button type="button" class="btn btn-primary" onclick="update(${type.id})" data-toggle="modal" data-target="#updateModal">修改</button>
                        <button type="button" class="btn btn-danger" onclick="del(${type.id})" onclick="del(${type.id})">删除</button>
                    </td>
                    </tr>`
                    $("tbody").append(rowItem);
                    i++
                }
            })
        }
        function search() {
            let value = $("#searchValue").val();
            loadTypes(value);
        }

        function del(id) {
           if(confirm("是否确定删除？")){
               $.post("/type/delOne",{"id":id},function(data){
                   if(data){
                       bootoast({
                           message:"删除成功！",
                           position:"top",
                           timeout:2,
                           type:"success"
                       })
                   }else{
                       bootoast({
                           message:"删除失败！",
                           position:"top",
                           timeout:2,
                           type:"danger"
                       })
                   }
                   loadTypes(null);
               })
           }
        }

        function update(id) {
            // location.href="./type-update.html?id="+id;
            $.getJSON("/type/selectOne",{"id":id},function(type){
                $("#id").val(type.id);
                $("#tName").val(type.tName);
                $("#rCount").val(type.rCount);
            })
        }

        function save() {
            let id = $("#id").val();
            let tNname = $("#tName").val();
            let roomCount = $("#rCount").val();
            $.post("/type/update",{"id":id,"rCount":roomCount},function(data){
                if(data){
                    bootoast({
                        message:"修改成功！",
                        position:"top",
                        timeout:2,
                        type:"success"
                    })

                }else{
                    bootoast({
                        message:"修改失败！",
                        position:"top",
                        timeout:2,
                        type:"danger"
                    })
                }
                loadTypes(null);
            })
        }



    </script>
</head>

<body>
<div class="container-fluid my-container">
    <!-- 页头 -->
    <ol class="breadcrumb" style="margin-top:5px;">
        <li><a href="#">主页</a></li>
        <li><a href="#">房型管理</a></li>
        <li class="active">房型列表</li>
    </ol>
    <!-- 检索框 -->
    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="searchValue" placeholder="请输入关键字">
        </div>
        <button type="button" class="btn btn-primary" id="searchBtn" onclick="search()">搜索</button>
        <!--        <button type="button" class="btn btn-danger">批量删除</button>-->
    </form>
    <!-- 内容 -->
    <div class="panel panel-default" style="margin-top: 10px;">
        <div class="panel-heading">
            <h3 class="panel-title">操作面板</h3>
        </div>
        <div class="panel-body">
            <!-- 表格 -->
            <table class="table table-hover table-condensed table-bordered table-striped">
                <thead>
                <!-- 标题行 -->
                <tr>
                    <th>编号</th>
                    <th>房型名称</th>
                    <th>房间数量</th>
                    <th width="180">操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 内容行 -->



                </tbody>
            </table>
            <!-- 分页组件 -->
<!--            <nav aria-label="Page navigation">-->
<!--                <ul class="pagination" id="pagination">-->

<!--                </ul>-->
<!--            </nav>-->
        </div>
    </div>


    <!-- 尾部 -->
    <div class="footer">技术支持:西安粤嵌信息科技有限公司</div>
</div>
<!-- 模态框：实现课程信息的展示与修改-->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <!-- 编辑界面的标题-->
                <h4 class="modal-title" id="exampleModalLabel"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">编辑课程信息</h4>
            </div>
            <div class="modal-body">
                <!-- 表单（输入组件），从添加复制过来，改一改 -->
                <form>
                    <!-- 编号，也就是主键ID,修改的时候一定要有这个，并且要设置为不可编辑（readonly）-->
                    <div class="form-group">
                        <label for="id">编<span
                                style="color:transparent;user-select: none;">隐藏</span>号：</label>
                        <input type="text" class="form-control" name="id" id="id" readonly>
                    </div>
                    <!-- 类型名称-->
                    <div class="form-group">
                        <label for="tName">类型名称：</label>
                        <input type="text" class="form-control" name="tName" id="tName" placeholder="请输入类型名称">
                    </div>
                    <!-- 房间数量 -->
                    <div class="form-group">
                        <label for="rCount">房间数量：</label>
                        <input type="number" class="form-control" name="rCount" id="rCount" placeholder="请输入房间数量">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="save-btn" onclick="save()">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 模态框：实现课程信息的删除-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel2"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
            </div>
            <div class="modal-body">
                确定删除当前类型？
                <!-- 这里需要使用隐藏域绑定一个主键编号：所谓隐藏域，就是程序中能够读到，用户却看不见-->
                <input type="hidden" id="courseId2">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="del-btn">确认</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>